<template>
	<view>
		<!-- 分类推荐楼层 -->
		<view class="f-header m-t">
			<image src="../../static/images/index/h1.png"></image>
			<view class="tit-box">
				<text class="tit">分类精选</text>
				<text class="tit2">Competitive Products For You</text>
			</view>
			<u-icon name="arrow-right"></u-icon>
		</view>
		<view class="hot-floor">
			<view class="floor-img-box">
				<image class="floor-img" src="../../static/images/index/swiper1.png" mode="scaleToFill"></image>
			</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper">
					<view 
						v-for="(item, index) in dataList.part1" :key="index"
						class="floor-item"
						@click="navToDetailPage(item)"
					>
						<image :src="item.mainImage" mode="aspectFill"></image>
						<view class="title clamp">{{item.name}}</view>
						<view class="price">￥{{item.price}}</view>
					</view>
					<view class="more">
						<text>查看全部</text>
						<text>More+</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="hot-floor">
			<view class="floor-img-box">
				<image class="floor-img" src="../../static/images/index/swiper1.png" mode="scaleToFill"></image>
			</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper">
					<view 
						v-for="(item, index) in dataList.part2" :key="index"
						class="floor-item"
						@click="navToDetailPage(item)"
					>
						<image :src="item.mainImage" mode="aspectFill"></image>
						<view class="title clamp">{{item.name}}</view>
						<view class="price">￥{{item.price}}</view>
					</view>
					<view class="more">
						<text>查看全部</text>
						<text>More+</text>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="hot-floor">
			<view class="floor-img-box">
				<image class="floor-img" src="../../static/images/index/swiper1.png" mode="scaleToFill"></image>
			</view>
			<scroll-view class="floor-list" scroll-x>
				<view class="scoll-wrapper">
					<view 
						v-for="(item, index) in dataList.part3" :key="index"
						class="floor-item"
						@click="navToDetailPage(item)"
					>
						<image :src="item.mainImage" mode="aspectFill"></image>
						<view class="title clamp">{{item.name}}</view>
						<view class="price">￥{{item.price}}</view>
					</view>
					<view class="more">
						<text>查看全部</text>
						<text>More+</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"classifyChoose",
		props:{
			dataList:{
				type:Object,
				default:null
			}
		},
		data() {
			return {
				
				
			};
		},
		methods:{
			navToDetailPage(item){
				let id = item.id;
				uni.navigateTo({
					url: `/pages/product/product?product_id=${id}`,
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.f-header{
	display:flex;
	align-items:center;
	height: 140upx;
	padding: 6upx 30upx 8upx;
	background: #fff;
	image{
		flex-shrink: 0;
		width: 80upx;
		height: 80upx;
		margin-right: 20upx;
	}
	.tit-box{
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	.tit{
		font-size: 34upx;
		color: #font-color-dark;
		line-height: 1.3;
	}
	.tit2{
		font-size: 24upx;
		color: #909399;
	}
	.icon-you{
		font-size: 34upx;
		color: #909399;
	}
}
/* 分类推荐楼层 */
.hot-floor{
	width: 100%;
	overflow: hidden;
	margin-bottom: 20upx;
	.floor-img-box{
		width: 100%;
		height:320upx;
		position:relative;
		&:after{
			content: '';
			position:absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(rgba(255,255,255,.06) 30%, #f8f8f8);
		}
	}
	.floor-img{
		width: 100%;
		height: 100%;
	}
	.floor-list{
		white-space: nowrap;
		padding: 20upx;
		padding-right: 50upx;
		border-radius: 6upx;
		margin-top:-140upx;
		margin-left: 30upx;
		background: #fff;
		box-shadow: 1px 1px 5px rgba(0,0,0,.2);
		position: relative;
		z-index: 1;
	}
	.scoll-wrapper{
		display:flex;
		align-items: flex-start;
	}
	.floor-item{
		width: 180upx;
		margin-right: 20upx;
		font-size: 26upx;
		color: #303133;
		line-height: 1.8;
		.title{
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			width: 150upx;
		}
		image{
			width: 180upx;
			height: 180upx;
			border-radius: 6upx;
		}
		.price{
			color: #fa436a;
		}
	}
	.more{
		display:flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		flex-shrink: 0;
		width: 180upx;
		height: 180upx;
		border-radius: 6upx;
		background: #f3f3f3;
		font-size: 28upx;
		color: #909399;
		text:first-child{
			margin-bottom: 4upx;
		}
	}
}
</style>